<template>
	<view class="">
		<view class="vip-b">
			<img class="vip-bg" src="../../../static/img/img/vip-bg.png" alt="">
			<view class="vip-info">
				<view class="vip-name">{{item.name}}</view>
				<view class="vip-lv">会员卡级别 {{data.level[item.level-1]}}</view>
			</view>
			<view class="vip-jige">
				<view class="">
					<text class="type">{{item.type.value=='次卡'?item.amount+'次卡':item.type.value}}</text>
					<text class="balance"><text>¥</text>{{item.price}}</text>
				</view>
			</view>
			<view v-show="props.type!='join'" @click="use(item)" class="use flex-center">{{props.type=='vip'?'加入会员':'去使用'}}
				<uv-icon name="arrow-right" color="#3C66F6" size="8"></uv-icon>
			</view>
		</view>
		<!-- 二维码 -->
		<Code type="myVip" :item="item" v-if="data.showCode" @close="close"></Code>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		onMounted
	} from 'vue';
	import Code from "@/compoments/order/code.vue";
	
	const props = defineProps(['type','item']); ///vip：加入会员   use:去使用
	const data = ref({
		showCode: false,
		level:['I','II','III'],
	})
	onMounted(()=>{
		console.log(props.item)
	
	})
	//关闭弹窗
	function close() {

		data.value.showCode = false;
	}
	//使用
	function use(item) {
		//加入会员
		if (props.type == 'vip') {
			// let info=JSON.stringify(item);
			uni.navigateTo({
				url: `/pages/vip/joinVip/joinVip?id=${item.id}`
			})
		}else{
			//使用会员码
			data.value.showCode = true;
			
		}
	}
</script>

<style lang="scss">
	.vip-b {
		width: 100%;
		height: 200rpx;
		border-radius: 8rpx;
		position: relative;

		.vip-bg {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.vip-info {
			position: absolute;
			z-index: 2;
			left: 32rpx;
			top: 72rpx;

			.vip-name {
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-bottom: 4rpx;
			}

			.vip-lv {
				font-size: 20rpx;
				color: #FFFFFF;
			}
		}

		.vip-jige {
			position: absolute;
			right: 46rpx;
			top: 36rpx;
			z-index: 2;

			.type {
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.balance {
				font-size: 48rpx;
				color: #FFFFFF;
				font-weight: bold;
				display: inline-block;
				margin-left: 24rpx;

				text {
					font-size: 24rpx;
				}
			}
		}

		.use {
			position: absolute;
			right: 46rpx;
			top: 108rpx;
			z-index: 2;
			width: 116rpx;
			height: 34rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 16rpx;
			text-align: center;
			line-height: 34rpx;
			font-size: 20rpx;
			color: #3C66F6;

			text {
				margin-left: 6rpx;
			}
		}
	}
</style>